<template>
	<view>
		<view class="">
			<view style="text-align: center;font-size: 50rpx;">车辆运输协议书</view>
			<view style="line-height: 2;">甲方: <text style="font-weight: bold ;">{{contractPreview.platformCoName }}</text></view>
			<view style="line-height: 2;">
				<text>乙方: <text style="font-weight: bold ;">{{contractPreview.driverName }}</text> </text>
				<text>(身份证号码: <text style="font-weight: bold ;">{{contractPreview.idcard }}</text> )</text>
			</view>
			鉴于: </br> 1.甲方为{{contractPreview.platformCoName }}（简称 “运易通公司”）在{{contractPreview.platName}}设立的公司。经运易通公司合法授权，甲方负责运易通公司旗下运必达微信小程序与运必达APP的实际运营。</br>
			2.乙方为已取得中华人民共和国道路运输相关资质的自然人。</br>
			<text style="color: #FFFFFF;">双方</text>双方本着平等公平、互惠互利的原则，在中华人民共和国法律、法规规定的范围内，在诚实守信、友好协商的基础上，达成货物运输长期合作伙伴关系。具体协议包括：</br>
			一、在合同期间，甲方为乙方提供相应的货源，运输价格在双方经协商同意后，乙方负责货物实际承运。</br>
			二、乙方为甲方提供设备齐全、车况良好、运行安全可靠、证件齐全、具有道路运营资质的车辆，乙方在甲方平台注册，应提交驾驶证、身份证、车辆行驶证等证件信息交由甲方进行审核。注册成功后，乙方可以在甲方平台上接单(运输订单)。乙方应保证为甲方提供运输服务的运输车辆、驾驶员等符合国家法律法规要求，车辆性能良好、安全可靠，车辆及驾驶员具有相应资质，能满足甲方货物运输的全部需求。乙方所驾驶车辆证件上的所属单位为乙方的挂靠行为或乙方可全权代表所属单位，由此引起的法律纠纷与经济损失由乙方全权承担。</br>
			（一）乙方的证件信息，包括身份证、驾驶证、行驶证、道路运输从业资格证、道路运输证等，另附证件照片，如乙方无法提供道路运输从业资格证或道路运输证，在签署此协议时则默认允许并授权于甲方从第三方途径获取所需证件信息，甲方承诺获得乙方的证件信息只用于乙方承运甲方货物时的资质审核，并做好乙方证件信息的安全保障且不会非法出售与泄露。</br>
			（二）乙方的车辆基本情况如下: （实际运输乙方车辆信息以运单为准）</br>
			 <view class="column-css" style="border: 2rpx solid #000000;margin: 10rpx 0;">
				 <view class="row-css">
					 <view class="view-sold" style="width: 22%;font-size: 26rpx;border-bottom: 2rpx solid #000000; border-right: 2rpx solid #000000;">车辆号码</view>
					 <view class="view-sold" style="width: 30%;font-size: 28rpx;border-right: 2rpx solid #000000;border-bottom: 2rpx solid #000000;"><text style="font-weight: bold ;">{{contractPreview.plateNum }}</text></view>
					 <view class="view-sold" style="width: 18%;font-size: 26rpx;border-right: 2rpx solid #000000;border-bottom: 2rpx solid #000000;">随车手机</view>
					 <view class="view-sold" style="width: 30%;font-size: 28rpx;border-bottom: 2rpx solid #000000;"><text style="font-weight: bold ;">{{contractPreview.mobile }}</text></view>
				 </view>
				 <view class="row-css" style="flex: 1;">
					 <view class="view-sold" style="width: 22%;font-size: 26rpx;border-bottom: 2rpx solid #000000; border-right: 2rpx solid #000000;">车辆类型</view>
					 <view class="view-sold" style="width: 30%;font-size: 28rpx;border-right: 2rpx solid #000000;border-bottom: 2rpx solid #000000;"><text style="font-weight: bold ;">{{contractPreview.typeName }}</text></view>
					 <view class="view-sold" style="width: 18%;font-size: 26rpx;border-right: 2rpx solid #000000;border-bottom: 2rpx solid #000000;">车长</view>
					 <view class="view-sold" style="width: 30%;font-size: 28rpx;border-bottom: 2rpx solid #000000;"><text style="font-weight: bold ;">{{contractPreview.length }}cm</text></view>
				 </view>
				 <view class="row-css" style="flex: 1;">
					 <view class="view-sold" style="width: 22%;font-size: 26rpx;border-bottom: 2rpx solid #000000; border-right: 2rpx solid #000000;">车辆品牌</view>
					 <view class="view-sold" style="width: 30%;font-size: 28rpx;border-right: 2rpx solid #000000;border-bottom: 2rpx solid #000000;"><text style="font-weight: bold ;">{{contractPreview.vehicleBrand }}</text></view>
					 <view class="view-sold" style="width: 18%;font-size: 26rpx;border-right: 2rpx solid #000000;border-bottom: 2rpx solid #000000;">车身颜色</view>
					 <view class="view-sold" style="width: 30%;font-size: 28rpx;border-bottom: 2rpx solid #000000;"><text style="font-weight: bold ;">{{contractPreview.vehicleColour }}</text></view>
				 </view>
				 <view class="row-css">
					 <view class="view-sold" style="width: 22%;font-size: 26rpx;border-right: 2rpx solid #000000;">车辆登记日期</view>
					 <view class="view-sold" style="width: 30%;font-size: 28rpx;border-right: 2rpx solid #000000;"><text style="font-weight: bold ;">{{contractPreview.registerDate }}</text></view>
					 <view class="view-sold" style="width: 18%;font-size: 26rpx;border-right: 2rpx solid #000000;">有效日期止</view>
					 <view class="view-sold" style="width: 30%;font-size: 28rpx;"><text style="font-weight: bold ;">{{contractPreview.validPeriod }}</text></view>
				 </view>
			 </view>
			三、甲方与乙方运输费用结款方式为每次运输完成，乙方向甲方交回运输回单。在甲方审核回单无误或者无任何争议后，5个工作日内将运输费用一次性支付给乙方。本协议的运输费用已包含乙方履行本协议约定事宜所有的成本、税费、服务费、路费、车辆使用费等。除经双方确认的运输费用外，甲方无需支付乙方其他费用。若存在争议，则费用结算相应顺延至争议解决完。乙方收款账号信息如下：
			<view class="column-css" style="border: 2rpx solid #000000;margin: 10rpx 0;">
				<view class="row-css">
					<view class="view-sold" style="width: 14%;font-size: 26rpx;border-bottom: 2rpx solid #000000; border-right: 2rpx solid #000000;">户名1</view>
					<view class="view-sold" style="width: 30%;font-size: 28rpx;border-right: 2rpx solid #000000;border-bottom: 2rpx solid #000000;"><text style="font-weight: bold ;">{{contractPreview.accountName1 }}</text></view>
					<view class="view-sold" style="width: 14%;font-size: 26rpx;border-right: 2rpx solid #000000;border-bottom: 2rpx solid #000000;">账号</view>
					<view class="view-sold" style="width: 42%;font-size: 28rpx;border-bottom: 2rpx solid #000000;"><text style="font-weight: bold ;">{{contractPreview.accountNumber1 }}</text></view>
				</view>
				<view class="row-css" style="flex: 1;">
					<view class="view-sold" style="width: 14%;font-size: 26rpx;border-bottom: 2rpx solid #000000; border-right: 2rpx solid #000000;">银行名</view>
					<view class="view-sold" style="width: 30%;font-size: 28rpx;border-right: 2rpx solid #000000;border-bottom: 2rpx solid #000000;"><text style="font-weight: bold ;">{{contractPreview.bankName1 }}</text></view>
					<view class="view-sold" style="width: 14%;font-size: 26rpx;border-right: 2rpx solid #000000;border-bottom: 2rpx solid #000000;">支行名</view>
					<view class="view-sold" style="width: 42%;font-size: 28rpx;border-bottom: 2rpx solid #000000;"><text style="font-weight: bold ;">{{contractPreview.branchName1 }}</text></view>
				</view>
				<view class="row-css" style="flex: 1;">
					<view class="view-sold" style="width: 100%;height: 35rpx; border-bottom: 2rpx solid #000000;"></view>
				</view>
				<view class="row-css">
					<view class="view-sold" style="width: 14%;font-size: 26rpx;border-bottom: 2rpx solid #000000; border-right: 2rpx solid #000000;">户名2</view>
					<view class="view-sold" style="width: 30%;font-size: 28rpx;border-right: 2rpx solid #000000;border-bottom: 2rpx solid #000000;"><text style="font-weight: bold ;">{{contractPreview.accountName2 }}</text></view>
					<view class="view-sold" style="width: 14%;font-size: 26rpx;border-right: 2rpx solid #000000;border-bottom: 2rpx solid #000000;">账号</view>
					<view class="view-sold" style="width: 42%;font-size: 28rpx;border-bottom: 2rpx solid #000000;"><text style="font-weight: bold ;">{{contractPreview.accountNumber2 }}</text></view>
				</view>
				<view class="row-css" style="flex: 1;">
					<view class="view-sold" style="width: 14%;font-size: 26rpx; border-right: 2rpx solid #000000;">银行名</view>
					<view class="view-sold" style="width: 30%;font-size: 28rpx;border-right: 2rpx solid #000000;"><text style="font-weight: bold ;">{{contractPreview.bankName2 }}</text></view>
					<view class="view-sold" style="width: 14%;font-size: 26rpx;border-right: 2rpx solid #000000;">支行名</view>
					<view class="view-sold" style="width: 42%;font-size: 28rpx;"><text style="font-weight: bold ;">{{contractPreview.branchName2 }}</text></view>
				</view>
			</view>
			 四、协议期限：从 <text style="font-weight: bold ;">{{contractPreview.startDate }}</text> 至 <text style="font-weight: bold ;">{{contractPreview.endDate }}</text> 止。
			五、甲方的权利和义务：</br> 
			（一）甲方有义务向乙方详细地提供相关的货源信息。</br>
			（二）甲方对乙方承运车辆的相关证件或资质具有审核权，但该等审核不构成免除乙方责任或要求甲方承担责任的依据；如甲方发现前述文件瑕疵（包括但不限于资质不全、虚假或不具有合法性等），甲方有权立即单方解除本协议。因此产生的一切损失由乙方自行承担，若造成甲方损失的，乙方负赔偿责任。</br>
			（三）在运输期间内，在运输途中的货物损失问题，甲方应积极协助乙方进行处理。</br>
			（四）因乙方未按时、未按要求提货或存在其他不符合运输要求的情况的，甲方有权将此运单委托其他承运人，因此导致的甲方损失，乙方应承担赔偿责任。</br>
			（五）甲方有权对乙方履行本合同的情况进行监督，对于不符合甲方及其托运人要求的交通工具及驾驶员，有权要求更换，乙方应在甲方规定的时间内进行更换。 </br>
			六、乙方的权利和义务：</br>
			（一）乙方及乙方车辆、司机必须保证相关手续齐全（包括缴纳交强险及商业险），符合国家的有关规定，具有合法的驾驶、营运资格，不得违章营运、不得使用假证、套牌车辆等，否则造成的损失，全部由乙方承担。</br>
			（二）乙方车辆的各项性能必须良好，车板上干净、干燥、无异物，能够满足甲方的货物运输要求；货物在乙方承运期间发生损坏、灭失的，乙方应承担由此造成的一切损失，因货物本身原因导致的损耗等不可抗拒因素除外。如乙方有偷盗行为，视情节轻重乙方自愿接受甲方:
			每次一万至十万元不等的违约金。以上金额甲方可以直接从应支付给乙方的运费中扣除，运费不足以支付赔偿金的部分由乙方用个人财产予以补足。</br>
			（三）乙方如有危害道路驾驶的行为如：疲劳驾驶、酒后驾驶、货物超载等情况，导致相关处罚或货物损失等意外情况发生由乙方自身承担。</br>
			（四）甲方提供给乙方使用的系统，乙方只能用于承运甲方货物时使用。乙方有义务按照安全规范使用，不得增加任何危险操作行为，如因乙方不规范使用导致的意外情况发生由乙方自身承担。</br>
			（五）乙方有义务确保将货物安全、如数、无损、及时地交于收货人并办理交接手续。实际货物的出库数量及质量由乙方或乙方指派人员向仓库方签收的单据为准。乙方应保证所签收的单据信息准确、完整，因乙方签收错误或遗漏导致的所有责任由乙方自行承担。</br>
			（六）乙方承运车辆上的电话不得关机、停机，自愿接受甲方系统对乙方手机进行跟踪管理，甲方有权获取车辆及驾驶员的实时位置信息及运行轨迹，以确认承运货物的运送情况。如因不可抗力导致手机关机、停机时，必须实时通知甲方，保持联系畅通到运输完成；</br>
			（七）卸货及送货过程中必须保持良好的服务态度不得与客户发生争执，如因此而造成的客户投诉按500元/次支付相应的违约金。</br>
			（八）乙方在运输期间的油料费用、停车费、过路过桥费、高速公路费等履行本协议或因过错原因产生的违章罚款等费用，由乙方自行承担。运输完成结算时，因甲方付给乙方的费用里涵盖了以上费用，故乙方应将运输途中所有的相关单据发票提供给甲方，如乙方不能提供发票，甲方有权代乙方向税务局申请开具发票。乙方保证配合提供相关资料。如相关税务机构另有要求的，乙方同意无条件配合。</br>
			（九）乙方享有对于装卸货情况详细了解的权利。如发现运输违禁货物，乙方应及时通知甲方，并有权利拒绝装货。</br>
			（十）乙方在本协议有效期间发生交通事故的，由乙方自行处理相关纠纷及承担相应的交通赔偿责任，与甲方无关。</br>
			（十一）乙方应采取必要的预防措施来确保货物的安全，不得超载、超限运输，严禁未经授权人员接触货物，确保将货物安全、如数、无损、及时地交于收货人并办理交接手续。</br>
			（十二）乙方在此同意并完全承认托运人对本协议项下货物的所有合法权利，并不可撤销地放弃对本协议项下任何货物的留置权。</br>
			（十三）乙方、乙方车辆或车辆驾驶员及随行人员、相关第三方在运输过程中产生的人身、财产损失，由乙方出面处理，承担相应的赔偿等责任。乙方应确保实际承运车辆已足额办理载运工具财产保险、第三者责任险以及相关作业人员的意外伤害险等并确保在双方合作期间该等保险持续有效,如发生运输货物损毁灭失等情况，涉及到保险公司责任赔付的，乙方应立即向甲方、投保的保险公司报告，并及时提供相关证据。保险责任赔付范围以外的损失和费用由乙方全额赔偿。</br>
			（十四）因回单丢失引起的所有责任由乙方全权负责。 </br>
			七、费用结算</br>
			（一）如果托运方在运输任务完成一个月内未进行交付确认的，且乙方未向甲方申请运费结算，双方针对此运单的权利义务解除。</br>
			（二）甲方有权根据合作情况，收取回单押金，该押金在乙方将收货方签收的回单原件交由甲方后无息退还给乙方。甲方若发现运输过程异常或单据不完整的情况，甲方有权延迟支付运费，要求乙方补充相关证明或资料，乙方不能按照要求补充的，甲方有权拒付运费，由此给造成一切损失由乙方自行承担。</br>
			八、双方声明：双方仅为商业范畴的承揽合同关系，既不存在劳动关系，也不存在雇佣关系。</br>
			 九.、本协议自甲方加盖电子印章、乙方线上确认之日起生效。</br>
			十、本协议的订立、变更、执行和和解，以及与本协议相关的争议解决，均应适用中华人民共和国法律，不含港澳台及台湾地区，不含冲突法规则。如发生争议，双方应友好协商解决，协商解决不成的，任何一方可在甲方所在地的人民法院起诉解决争议。</br>
			十一、协议期满，如双方无异议，则自动顺延。</br>
			 
			 <view class="row-css" style="justify-content: space-between;">
				 <view class="row-css" style="width: 50%;align-items: center;">甲方：<view style="margin-left: -40rpx;"><image style="width: 200rpx;height: 200rpx;" mode="aspectFill" :src="contractPreview.imgUrl"></image></view></view>
				 <view style="display: flex; width: 50%;align-items: center;text-align: center;">乙方：</view>
			 </view> 
			 <view class="row-css" style="justify-content: space-between;margin-bottom: 220rpx;">
				 <view class="row-css" style="width: 50%;"></view>
				 <view style="width: 50%;">签约时间：</view>
			 </view> 
			<view class="column-css" style="position: fixed;bottom: 0;width: 100%; background: #FFFFFF;">
				<view style="width: 100%;height: 1px;background: #B9B9B9;margin-bottom: 20rpx;"></view>
				<view v-if="countdown != 0" class="view-deltorder" style="background: #D9D9D9;color: #FFFFFF;" @click="onorder()">请仔细阅读({{countdown}})</view>
				<view class="view-deltorder" style="margin-bottom: 30rpx;border: 1rpx solid #007AFF;" @click="onorder()">开始签约</view>
			</view>
		</view>
		<uni-popup ref="popup3" type="center">
			<view class="column-css" style="background: #FFFFFF;width: 630rpx;border-radius: 10rpx;align-items: center;padding: 15rpx 0;">
				<view style="padding: 10rpx;margin-bottom: 10rpx;font-size: 36rpx;">
					您即将签署
					<text style="font-size: 32rpx;" @click="opensign()">《车辆货物运输协议》</text>
				</view>
				<view class="column-css" style="padding: 0 20rpx; text-align: center;font-weight: 100;">
					您已进入<text style="color: #007AFF;">【{{signedInfo.platformCoName }}】</text>
					签约流程，请认真核对签约信息
				</view>
				<view style="width: 100%; height: 1rpx;background: #B9B9B9;margin-top: 10rpx;"></view>
				<view style="margin:0 10rpx;margin-top: 10rpx;padding: 20rpx 0;">
					<view >网络承运商信息：{{signedInfo.platformCoName }}</view>
					<view class="column-css" style="margin-top: 20rpx;">
						<view style="padding: 10rpx;">签约姓名：{{signedInfo.driverName }}<image style="width: 120rpx;height: 35rpx;" mode="aspectFill" src="../../static/icon_verifled.png"></image></view>
						<view style="padding: 10rpx;">签约车牌号：{{signedInfo.plateNum }}</view>
						<view style="padding: 10rpx;">车辆登记有效期：{{signedInfo.validPeriod }}</view>
						<view style="padding: 10rpx;">随车手机号：{{signedInfo.mobile }}</view>
						<view class="row-css" style="padding: 10rpx;">
							<view class="row-css" style="align-items: center;">短信验证码：</view>
							<view class="row-css" style="justify-content: center;">
								<input class="input-code" type="phone" maxlength="6" onkeyup="this.value=this.value.replace(/\D/g,'')" placeholder="验证码" v-model="checkCode" />
								<view class="code-view" @click="sendcode">
									<text style="text-align: center;">{{ codeText }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="row-css" style="margin-left: -130rpx;margin-bottom: 20rpx; align-items: center;">
					<checkbox :checked="ischeckbox" style="transform:scale(0.7)" @click="checkbox()"></checkbox>
					<view style="font-size: 24rpx;"><text>本人已阅读合同全文并同意所有条款</text></view>
				</view>
				<view style="width: 100%;height: 1rpx;background: #B9B9B9;"></view>
				<view class="row-css" style="width: 100%;">
					<view class="row-css" style="width: 49%;justify-content: center; padding: 20rpx; color: #B9B9B9;" @click="signcanal()">关闭</view>
					<view style="height: auto;width: 1rpx;background: #B9B9B9;"></view>
					<view class="row-css" style="width: 49%;justify-content: center; padding: 20rpx;color: #007AFF;" @click="signContract()">签约</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ischeckbox: false,
			countdown: 3,
			time: 60,
			checkCode: '',
			codeText: '获取验证码',
			contractPreview:{},
			signedInfo:{},
			projectCode:''
		};
	},
	methods: {
		checkbox: function() {
			this.ischeckbox = !this.ischeckbox;
		},
		onorder: function() {
			if(this.countdown != 0){
				uni.showToast({
					title: '请先仔细阅读合约！',
					icon: 'none'
				});
				return;
			}
			this.$refs.popup3.open('center');
		},
		sendcode() {
			if (this.time == 60) {
				this.wxRequest({
					url: `${this.API}/driverYearSign/signSendCode`,
					method: 'POST',
					data: {
						driverId: uni.getStorageSync(this.DATA_KEY.userInfo).driverId,
						platformCoNo: this.signedInfo.platformCoNo
					},
					title: '验证码发送中...',
					success: res => {
						this.projectCode = res.data.data;
						uni.showToast({
							title: '验证码已发送',
							icon: 'none'
						});
					}
				});
				this.timer = setInterval(() => {
					this.codeText = `${this.time}s后获取验证码`;
					this.time--;
					if (this.time < 0) {
						this.time = 60;
						this.codeText = '获取验证码';
						clearInterval(this.timer);
					}
				}, 1000);
			}
		},
		signcanal() {
			this.$refs.popup3.close();
		},
		signContract() {
			if (this.checkCode == '') {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				});
				return;
			}
			if (!this.ischeckbox) {
				uni.showToast({
					title: '请勾选同意相关条款',
					icon: 'none'
				});
				return;
			}
			let that = this;
			that.wxRequest({
				// 获取ip
				url: `${that.API}/driverService/getIp`,
				success(res) {
					let ip = res.data.data.ip
					that.wxRequest({
						url: `${that.API}/driverYearSign/driverSignContract`,
						method: 'POST',
						data: {
							driverId: uni.getStorageSync(that.DATA_KEY.userInfo).driverId,
							etpId: uni.getStorageSync(that.DATA_KEY.etpId),
							platformCoNo:that.signedInfo.platformCoNo,
							projectCode:that.projectCode,
							code: that.checkCode,
							ip:ip
						},
						title: '验证中...',
						success: res => {
							uni.showToast({
								title: '恭喜，您已完成签约！',
								icon: 'none'
							});
							that.$refs.popup3.close();
							uni.navigateBack({
								delta: 1
							});
						}
					});
				}
			});
			uni.request({
				// 获取ip
				url: `${that.API}/driverService/getIp`,
				success(res) {
					let ip = res.data.data.ip
					that.wxRequest({
						url: `${that.API}/driverYearSign/driverSignContract`,
						method: 'POST',
						data: {
							driverId: uni.getStorageSync(that.DATA_KEY.userInfo).driverId,
							etpId: uni.getStorageSync(that.DATA_KEY.etpId),
							platformCoNo:that.signedInfo.platformCoNo,
							projectCode:that.projectCode,
							code: that.checkCode,
							ip:ip
						},
						title: '验证中...',
						success: res => {
							uni.showToast({
								title: '恭喜，您已完成签约！',
								icon: 'none'
							});
							that.$refs.popup3.close();
							uni.navigateBack({
								delta: 1
							});
						}
					});
				}
			});
			
		}
	},
	onLoad(options){
		let platformCoNo = options.platformCoNo;
		this.timer = setInterval(() => {
			this.countdown--;
			if (this.countdown < 0) {
				this.countdown = 0;
				clearInterval(this.timer);
			}
		}, 1000);
		this.wxRequest({
			url: `${this.API}/driverYearSign/contractPreview`,
			method: 'POST',
			data: {
				driverId: uni.getStorageSync(this.DATA_KEY.userInfo).driverId,
				etpId: uni.getStorageSync(this.DATA_KEY.etpId),
				platformCoNo: platformCoNo
			},
			title: '加载中...',
			success: res => {
				this.contractPreview = res.data.data;
			}
		});
		this.wxRequest({
			url: `${this.API}/driverYearSign/toBeSignedInfo`,
			method: 'POST',
			data: {
				driverId: uni.getStorageSync(this.DATA_KEY.userInfo).driverId,
				etpId: uni.getStorageSync(this.DATA_KEY.etpId)
			},
			title: '加载中...',
			success: res => {
				this.signedInfo = res.data.data;
			}
		});
	}
};
</script>

<style>
page{
	background: #FFFFFF;
	line-height: 1.5;
	padding: 0 10rpx;
}
.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}

.view-sold{
	padding: 15rpx 0rpx;
	text-align: center; 
}

.view-deltorder {
	text-align: center;
	margin: 10rpx 60rpx;
	padding: 10rpx 0;
	color: #007AFF;
	border-radius: 8rpx;
}

.code-view {
	width: 140rpx;
	text-align: center;
	padding: 12rpx 0;
	background: #ffffff;
	border: 1rpx solid #eeeeee;
	border-radius: 2rpx;

	width: 200rpx;
	text-align: center;
	font-size: 24rpx;
	margin-left: 20rpx;
	color: #ffffff;
	background: #2979ff;
	border-radius: 2rpx;
	padding: 15rpx 0;
}

.input-code {
	width: 140rpx;
	text-align: center;
	padding: 12rpx 0;
	background: #ffffff;
	border: 1rpx solid #eeeeee;
	border-radius: 2rpx;
}
</style>
